<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: shuan
  Date: 2016/12/5
  Time: 15:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../../include/head.jsp">
    <jsp:param name="title" value="一天或某一班次状态分布饼图"/>
</jsp:include>

<jsp:include page="../../../include/tenant_header.jsp"/>
<jsp:include page="../../../include/tenant_sidebar.jsp"/>
<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display: inline-block">一天或某一班次状态信息</h4>
    </section>
    <section class="content" style="min-height: 0">
        <%--饼图选项条--%>
        <div style="width:100%;border:1px solid #cdd9e1;background-color:#fff">
            <div style="width: 100%;border:1px solid #cdd9e1;background-color: #fff;padding-bottom: 20px;">
                <div class="row sie-chart-title">
                    <div class="sie-title-des">一天或某一班次状态图</div>
                    <div class="sie-chart-btn">
                        <div style="display: inline-block">
                            <a id="exportSubmit" href="javascript:;" class="hollow-button-green hidden" style="line-height: 2.5;" onclick="exportChartData()"><spring:message code="label.export.data"/></a>
                        </div>
                    </div>
                </div>
                <!--header -->
                <div style="padding: 15px 15px 15px  50px;">
                    <div class="row">
                        <div class="col-md-2">
                            <label style="min-width: 50px;">类型:</label>
                            <select id="type" class="form-control" style="max-width: 150px;height: 30px;padding: 0 2px;border-radius:5px;display: inline-block" onchange="searchClick()">
                                <option data-id="1">全部</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">型号:</label>
                            <select id="model" class="form-control" style="max-width: 150px; height: 30px;padding: 0 2px;border-radius:5px;display: inline-block" onchange="searchClick()">
                                <option data-id="1">全部</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">组:</label>
                            <select id="group" class="form-control" style="max-width: 150px; height: 30px;padding: 0 2px;border-radius:5px;display: inline-block" onchange="searchClick()">
                                <option data-id="1">全部</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">流水线:</label>
                            <select id="line" class="form-control" style="max-width: 150px;height: 30px;padding: 0 2px;border-radius:5px;display: inline-block" onchange="searchClick()">
                                <option data-id="1">全部</option>
                            </select>
                        </div>
                        <%--<div class="col-md-2">--%>
                            <%--<label style="min-width: 50px;">&nbsp;</label>--%>
                            <%--<a id="search" href="javascript:;" class="solid-button-orange">查找</a>--%>
                        <%--</div>--%>
                    </div>
                </div>
                <div style="padding-right: 15px;padding-left: 50px;display: -webkit-box;color: white;font-size: 12px;">
                    <div style="width: 100%;height: 30px;">
                        <div style="display: inline-block;display: -ms-inline-flexbox;color:#000;font-size:14px"><spring:message code="label.choice.device"/>:</div>
                        <div style="display: inline-block;display: -ms-inline-flexbox;">
                            <select id="device" class="form-control" style="max-width:200px;min-width:100px;min-height: 20px;max-height: 30px;padding: 0px 2px;border-radius:5px;"
                                    onchange="deviceChange(this)">

                            </select>
                        </div>
                    </div>
                </div>

                <div id="chartContainer" class="hidden" style="width: 100%;padding: 10px 0 10px 50px;line-height: 2.4;display: -webkit-box;color: white;font-size: 12px;">
                    <div class="sie-calendar-parent" style="display: inline-block;display: -ms-inline-flexbox;">
                        <input type="text" class="form-control sie-calendar-input datepicker" style="background-color: #fff;" readonly placeholder="<spring:message code="label.choice.date"/>" id="dOrsState_getDay">
                        <img src="/images/calendar.png" class="sie-calendar-img">
                    </div>
                    <div style="display: inline-block;display: -ms-inline-flexbox;">
                        <select id="dOrsState_shiftSelect" class="form-control" style="border-radius: 5px;height: 30px;padding: 0;" onchange="oneDeviceState(this)">

                        </select>
                    </div>
                </div>
                <div id="dayOrShiftStatePieChart" style="padding: 20px;">

                </div>
            </div>
        </div>
    </section>
</div>
<jsp:include page="../../../include/foot.jsp"/>
<script src="/../js/dx.all.js"></script>
<script src="/../js/charts.js"></script>

<script>
    var exportData = {};
    $(document).ready(function () {
        //获取租户所有设备
        loadChartHeaders();
        searchClick();
//        $("#search").click(function(){
//            searchClick();
//        });
        bindDateInputClickEvent();
    });

    function deviceChange(dom, prefix) {
        $("#exportSubmit").addClass("hidden");
        if ($("#device").find("option:selected").data("option") == 'first') {
            createDayOrShiftStatePieChart([],'<spring:message code="label.chart.pie.dayOrShift.state"/>','<spring:message code="label.online"/>','<spring:message code="label.offline"/>','<spring:message code="label.unknown.state"/>');
            $("#chartContainer").addClass("hidden");
            return;
        }
        $("#chartContainer").removeClass("hidden");
        $("#dOrsState_getDay").val(dateFormat(dateAddSubtract(new Date,-1)));
        $("#dOrsState_getDay").datepicker("update");
        getShifts();
    }

    function getShifts() {
        if($("#dOrsState_getDay").val() == ""){
            swal({
                title:"<spring:message code="label.warning"/>",
                text:'<spring:message code="label.please.choice.date"/>',
                type:"warning",
                showCancelButton:false,
                showConfirmButton:true,
                confirmButtonText: '<spring:message code="label.admin.confirm"/>',
                animation:"slide-from-top"
            },function(){
                $("#exportSubmit").addClass("hidden");
                createDayOrShiftStatePieChart([],'<spring:message code="label.chart.pie.dayOrShift.state"/>','<spring:message code="label.online"/>','<spring:message code="label.offline"/>','<spring:message code="label.unknown.state"/>');
                return;
            });
        }
        $.ajax({
            url: "/partner/{tenant}/api/v1/periodsoftime/shift".replace("{tenant}", getKeyByUrl()),
            type: "get",
            data: {
                deviceId: $("#device").find("option:selected").data("id"),
                startTime: $('#dOrsState_getDay').val()
            },
            success: function (data) {
                $("#dOrsState_shiftSelect").empty();    //清空
                if(data.result != 'SUCCESS' || data.data.length == 0){
                    $("#dOrsState_shiftSelect").append($("<option></option>").text('<spring:message code="label.day.no.shift"/>'));
                    createDayOrShiftStatePieChart([],'<spring:message code="label.chart.pie.dayOrShift.state"/>','<spring:message code="label.online"/>','<spring:message code="label.offline"/>','<spring:message code="label.unknown.state"/>');
                    return;
                }
                var shift_first_time = data.data[0].startTime;
                var shift_end_time = data.data[data.data.length-1].endTime;
                var $firstOption = $("<option></option>").attr("id", "firstOption").attr("data-starttime", shift_first_time).attr("data-endtime", shift_end_time).attr("selected","selected").text(shift_first_time+"-"+shift_end_time);
                $("#dOrsState_shiftSelect").append($firstOption);
                $.each(data.data, function (index, result) {
                    var $option = $("<option></option>").attr("data-starttime", result.startTime).attr("data-endtime", result.endTime).text(result.startTime + "-" + result.endTime);
                    $("#dOrsState_shiftSelect").append($option);
                });
                oneDeviceState();
            },
            error: function (e) {
                console.log(e);
            }
        })
    }

    function oneDeviceState() {
        $("#exportSubmit").addClass("hidden");
        var $selected = $("#dOrsState_shiftSelect").find("option:selected");
        var startTime = $selected.data("starttime");
        var endTime = $selected.data("endtime");
        console.log(startTime + "_____" + endTime);
        var data = {
            deviceId: $("#device").find("option:selected").data('id'),
            deviceName: $("#device").find("option:selected").val(),
            day: $('#dOrsState_getDay').val(),
            startTime: startTime,
            endTime: endTime
        };
        exportData = data;
        BYLoadingToast('<spring:message code="label.loading"/>', function (dtd) {
            $.ajax({
                url: "/partner/{tenant}/api/v1/periodStateTime/dayOrShiftState".replace("{tenant}", getKeyByUrl()),
                type: "get",
                data: data,
                success: function (result) {
                    if (result.result != 'SUCCESS' || result.data.length == 0) {
                        createDayOrShiftStatePieChart([],'<spring:message code="label.chart.pie.dayOrShift.state"/>','<spring:message code="label.online"/>','<spring:message code="label.offline"/>','<spring:message code="label.unknown.state"/>');
                        dtd.resolve();
                        return;
                    }
                    createDayOrShiftStatePieChart(result.data,'<spring:message code="label.chart.pie.dayOrShift.state"/>','<spring:message code="label.online"/>','<spring:message code="label.offline"/>','<spring:message code="label.unknown.state"/>');
                    $("#exportSubmit").removeClass("hidden");
                    dtd.resolve();
                },
                error: function (e) {
                    dtd.resolve();
                    console.log(e);
                }
            });
        });
    }

    function exportChartData(){
        BYLoadingToast('<spring:message code="label.loading"/>', function (dtd) {
            $.ajax({
                url: "/partner/{tenant}/api/v1/export/dayOrShiftState".replace("{tenant}", getKeyByUrl()),
                type: "get",
                data: exportData,
                success: function (result) {
                    if (result.data == null || result.data == "" || result.data == undefined) {
                        dtd.resolve();
                    } else {
                        dtd.resolve();
                        window.location.href = "/api/v1/excel/get?name=" + result.data;
                    }
                },
                error: function (e) {
                    dtd.resolve();
                    console.log(e);
                }
            });
        });
    }
</script>

